<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

    <link href="./CSS/demo4.css" rel="stylesheet">
    <link href="https://at.alicdn.com/t/c/font_4624650_j5wwvgiwdq.css" rel="stylesheet">
</head>
<body>
<div id="root">
    <div class="header">
        <div>
            <div class="logo">
                <img alt="" src="./images/demo4_logo.png">
            </div>
            <div class="headerNav">
                <ul>
                    <li :class="item.headerCC" :key="item.id" v-for="item in headerNav"><a href="">{{item.title}}</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="content">

        <!--轮播图-->
        <div class="slideshow">
            <ul>
                <li :key="item.id" v-for="item in slideshow"><img :src="item.src" alt=""></li>
            </ul>
        </div>

        <!--内容-->
        <div :key="items.id" class="contentMain" v-for="items in main" :class="items.main_class">
            <div class="main_title">
                <span>{{items.title}}</span>
            </div>
            <div class="main_content">
                <ul>
                    <li :key="item.id" v-for="item in items.main_content">
                        <div>
                            <i :class="item.main_icon" v-if="item.main_icon"></i>
                            <img :src="item.main_img" class="main_img" v-if="item.main_img" alt="">
                        </div>
                        <p>{{item.title}}</p>
                        <p>{{item.text}}</p>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</div>
<script src="./JS/demo4.js"></script>
</body>
</html>